<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->
<div class="live-demo-wrap">
    <h2>Drawer in Drawer</h2>
    <div class="demo-3 live-demo">
        <div class="custom-container">
            <j-drawer container=".custom-container" width="40%" height="100%">
                <div class="drawer-content">
                    <br><br>这是一个外层抽屉
                    <j-drawer container=".drawer-content" position="bottom" width="80%" height="150">
                        <br><br>这是一个内层抽屉
                    </j-drawer>
                </div>
            </j-drawer>
            <!-- 在内容的外面加个wrapper，用来生成滚动条 -->
            <div class="drawer-content-wrapper">
                这是一段展示文本，这是一段展示文本，这是一段展示文本，这是一段展示文本，这是一段展示文本，<br>
                这是一段展示文本，这是一段展示文本，这是一段展示文本，这是一段展示文本，这是一段展示文本，<br>
                这是一段展示文本，这是一段展示文本，这是一段展示文本，这是一段展示文本，这是一段展示文本，<br>
                这是一段展示文本，这是一段展示文本，这是一段展示文本，这是一段展示文本，这是一段展示文本，<br>
                这是一段展示文本，这是一段展示文本，这是一段展示文本，这是一段展示文本，这是一段展示文本，<br>
                这是一段展示文本，这是一段展示文本，这是一段展示文本，这是一段展示文本，这是一段展示文本，<br>
                这是一段展示文本，这是一段展示文本，这是一段展示文本，这是一段展示文本，这是一段展示文本，<br>
            </div>
            <j-drawer container=".custom-container" position="right" width="40%" height="100%">
                <div class="drawer-content">
                    <br><br><br><br><br><br><br><br><br><br>这是另一个抽屉
                    <j-drawer container=".drawer-content" position="top" [open]="true" width="80%" height="150">
                        <br><br>这是一个内层抽屉
                    </j-drawer>
                </div>
            </j-drawer>
        </div>
    </div>
</div>





